<template>
  <div class="chart-group">
    <template v-for="(e, i) in 9">
      <div class="chart-cell" :key="i" ref="chart">{{ e }}</div>
    </template>
  </div>
</template>
<script>
/**
 * 页面核心数据结构体说明文档
 *
 *
 */
// import New from './components/New.vue';
export default {
  name: "EchartsView",
  components: {
    // New,Old,
  },
  props: {
    sampleP: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      sampleD: "value",
    };
  },
  computed: {
    // sampleC() {
    //     return this.sampleD+'--';
    // }
  },
  created() {},
  mounted() {
    this.gene0();
    this.gene1();
    this.gene2();
    this.gene3();
    this.gene4();
    this.gene5();
    this.gene6();
  },
  methods: {
    sampleM() {},
    gene0() {
      let p = this.$echart.init(this.$refs.chart[0]);
      let opt = {
        title: {
          text: "bar_example",
        },
        yAxis: {
          type: "category",
          data: ["毛衣", "物品", "杯子"],
        },
        xAxis: {
          type: "value",
        },
        series: {
          type: "bar",
          data: [199, 323, 44],
        },
      };
      p.setOption(opt);
    },
    geneX(n = 100) {
      let t = [];
      for (let i = 0 - n; i <= n; i++) {
        t.push(i);
      }
      return t;
    },
    geneY(n = 100, callback) {
      let t = [];
      for (let i = 0 - n; i <= n; i++) {
        let j = callback(i);
        t.push(j);
      }
      return t;
    },
    gene1() {
      let p = this.$echart.init(this.$refs.chart[1]);
      // let xdata = [];
      // let ydata = [];
      // let zdata = [];
      // for (let i = -100; i < 100; i++) {
      //   xdata.push(i);
      //   let j = 80 * i + 10;
      //   ydata.push(j);
      //   let k = i * i - 10;
      //   zdata.push(k);
      // }
      // console.log(xdata);
      // console.log(ydata);
      let opt = {
        xAxis: {
          type: "category",
          data: this.geneX(80),
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            type: "line",
            data: this.geneY(80, (x) => 80 * x + 10),
          },
          {
            type: "line",
            data: this.geneY(80, (x) => Math.pow(x, 2) + 10),
          },
          {
            type: "line",
            data: this.geneY(80, (x) => -60 * x + 40),
          },
        ],
      };
      p.setOption(opt);
    },
    gene2() {
      let p = this.$echart.init(this.$refs.chart[2]);
      let opt = {
        xAxis: {
          type: "category",
          data: this.geneX(10),
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            stack: "one",
            type: "bar",
            data: this.geneY(10, (x) => 2 * x + 1),
          },
          {
            stack: "one",
            type: "bar",
            data: this.geneY(10, (x) => 3 * x + 4),
          },
          {
            stack: "two",
            type: "bar",
            data: this.geneY(10, (x) => x + 4),
          },
        ],
      };
      p.setOption(opt);
    },
    gene3() {
      let s = this.$echart.init(this.$refs.chart[3]);
      let option = {
        series: [
          /*   data: [199, 323, 44],     data: ["毛衣", "物品", "杯子"],*/
          {
            type: "pie",
            data: [
              { name: "毛衣", value: 199 },
              { name: "物品", value: 323 },
              { name: "杯子", value: 44 },
            ],
            radius: ["70%", "50%"],
          },
        ],
      };
      s.setOption(option);
    },
    gene4() {
      let s = this.$echart.init(this.$refs.chart[4]);
      let opt = {
        xAxis: {
          type: "category",
          data: [1, 2, 3, 4, 5],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            type: "scatter",
            data: [2, 4, 6, 4, 2],
            symbol: "triangle",
          },
        ],
      };
      s.setOption(opt);
    },
    gene5() {
      let e = this.$echart.init(this.$refs.chart[5]);
      let opt = {
        radar: {
          indicator: [
            { name: "颜值", max: 10 },
            { name: "战斗力", max: 10 },
            { name: "敏捷", max: 10 },
            { name: "机智", max: 10 },
            { name: "团队力", max: 10 },
          ],
        },
        legend: {
          data: ["zhangsan", "lisi", "wangwu"],
        },

        series: [
          {
            type: "radar",
            data: [
              { value: [1, 2, 3, 4, 5], name: "zhangsan" },
              { value: [8, 8, 8, 6, 6], name: "lisi" },
              { value: [3, 4, 8, 6, 9], name: "wangwu" },
            ],
          },
        ],
      };
      e.setOption(opt);
    },
    gene6() {
      let e = this.$echart.init(this.$refs.chart[6]);
      let opt = {
        legend: {},
        dataset: {
          // 提供一份数据。
          source: [
            ["product", "2015年度", "2016年度", "2017年度"],
            ["Coco", 43.3, 85.8, 93.7],
            ["Milk Tea", 83.1, 73.4, 55.1],
            ["Cheese", 86.4, 65.2, 82.5],
            ["Walnut", 72.4, 53.9, 39.1],
          ],
        },
        // 声明一个 X 轴，类目轴（category）。默认情况下，类目轴对应到 dataset 第一列。
        yAxis: { type: "category" },
        // 声明一个 Y 轴，数值轴。
        xAxis: {},
        // 声明多个 bar 系列，默认情况下，每个系列会自动对应到 dataset 的每一列。
        series: [
          { type: "bar", stack: "main" },
          { type: "bar", stack: "main" },
          { type: "bar", stack: "main" },
        ],
      };
      e.setOption(opt);
    },
  },
  watch: {
    // sampleC(newValue, oldValue) {
    //
    // }
  },
};
</script>

<!--<style scoped>-->
<style lang="scss" scoped>
.chart-group {
  display: flex;
  flex-wrap: wrap;
}
.chart-cell {
  margin: 10px;
  width: 500px;
  height: 450px;
  background-color: #d5f3e4;
}
</style>
